<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      margin:0;
    }
  </style>
</head>
<body>
<div id="div1">
  <svg xmlns="http://www.w3.org/2000/svg" width="100vw" height="100vh" >
    <path id="path1" d="M 100 200 Q 200 100 300 200 T 500 200" stroke="rgb(0,255,0)" fill="none"/>
    <!--
      此时text的
      x属性是让文字顺着轨迹移动
      y属性没有作用(可以考虑使用dy,但dy会影响到后面的文字(不仅同一个tspan,后面的tspan也会受到影响))

      text-anchor
      沿着轨迹对齐

      start-offset
      可以将文字沿着轨迹进行偏移
      100%就是将文字队列推到轨迹末尾
    -->
    <text style="font-size: 24px" text-anchor="middle">
      <textPath xlink:href="#path1" dominant-baseline="central" startOffset="50%">
        <tspan>这个文字先</tspan>
        <tspan dy="-30" fill="blue">上去</tspan>
        <tspan dy="30">,又</tspan>
        <tspan dy="30" fill="red">下来</tspan>
        <tspan dy="-30">了。 Upside down in english!</tspan>
      </textPath>
    </text>
  </svg>
</div>
<script>

</script>
</body>
</html>
